@extends('admin.layouts.content')
@section('content')

    <div class="layuimini-container">
        <div class="layuimini-main">
            <div>
                <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
                <script type="text/html" id="table-top-bar" lay-filter="table-top-bar">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm" lay-event="add">新增菜单</button>
                        <button class="layui-btn layui-btn-sm" id="btn-expand" lay-event="expand">全部展开</button>
                        <button class="layui-btn layui-btn-sm" id="btn-fold" lay-event="fold">全部折叠</button>
                    </div>
                </script>
            </div>
        </div>
    </div>
    <!-- 操作列 -->
    <script type="text/html" id="auth-state">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>
@endsection

@section('script')
    <script>
        layui.use(['table', 'treetable'], function () {
            var $ = layui.jquery;
            var table = layui.table;
            var treetable = layui.treetable;

            // 渲染表格
            layer.load(2);
            treetable.render({
                treeColIndex: 1,
                treeSpid: 0,
                treeIdName: 'id',
                treePidName: 'parent_id',
                elem: '#munu-table',
                url: '{{url('admin/api/menu/table_list')}}',
                page: false,
                cols: [[
                    {type: 'id', width:60, field:'id', title:'编号'},
                    {field: 'title', minWidth: 200, title: '权限名称'},
                    {field: 'name', title: '权限标识'},
                    {field: 'icon', title: '显示图标', width:100, templet: function(obj){
                            return '<i class="layui-icon ' + obj.icon + '"></i>';
                        }},
                    {field: 'uri', title: '功能链接'},
                    {field: 'sort', width: 80, align: 'center', title: '排序号'},
                    {field : 'menuType', width:80, align:'center'},
                    {templet: '#auth-state', width: 120, align: 'center', title: '操作'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                },
                toolbar: "#table-top-bar"
            });

            table.on('toolbar(munu-table)', function (obj) {
                switch(obj.event) {
                    case 'add':
                        eventMap.add();
                        break;
                    case 'expand':
                        treetable.expandAll('#munu-table');
                        break;
                    case 'fold':
                        treetable.foldAll('#munu-table');
                        break;
                }
            });

            //监听工具条
            table.on('tool(munu-table)', function (obj) {
                switch (obj.event) {
                    case 'edit':
                        eventMap.edit(obj);
                        break;
                    case 'delete':
                        eventMap.delete(obj);
                        break;
                }
            });
        });

        var eventMap = {
            add: function(obj) {
                layer.open({
                    'type': 2,
                    'title': '添加功能菜单',
                    'area': ['600px', '600px'],
                    'content': '{{url('admin/menu/create')}}',
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                        submit.click();
                    }
                });
            },
            edit: function(obj) {
                layer.open({
                    'type': 2,
                    'title': '编辑菜单',
                    'area': ['700px', '600px'],
                    'content' : '{{url('admin/menu/edit')}}/' + obj.data.id,
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
                        submit.click();
                    }
                });
            },
            delete: function (obj) {
                layer.confirm('您确定要删除菜单吗', {
                    btn: ['确认', '取消']
                }, function(index, layero){
                    $.ajax({
                        url : '{{url('admin/api/menu/delete')}}',
                        data : { id : obj.data.id },
                        dataType : 'json',
                        success : function(result) {
                            if(result.error == 0) {
                                layer.msg("已删除");
                                active.reload();
                            }
                        }
                    });
                }, function(index){
                    layer.closeAll();
                });
            }
        };
    </script>
@endsection